<template>
  <div class="app-container">
    <el-row :gutter="10" type="flex" style="height: 98%">
      <el-col :span="24">
        <el-row :gutter="10" class="mb8" v-if="!query">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              v-hasPermi="['money:moeProcessProfit:export']">
              导出
            </el-button>
          </el-col>
          <!--          <Tag type="dot" size="default" color="#09aa46">启动</Tag>-->
          <!--          <Tag type="dot" size="default" color="#bb0331">等待</Tag>-->
          <!--          <Tag type="dot" size="default" color="#4169E1">暂停</Tag>-->
          <!--          <Tag type="dot" size="default" color="#FAFFF0">完成</Tag>-->
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
          @scrollBottom="load"
          highlight-current-row
          border
          stripe
          :cell-style="iCellStyle"
          v-loading="loading"
          :height="tableH"
          :data="moeDetList"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column label="#" width="40" align="center" type="index" fixed="left"/>
          <el-table-column label="销售单号" :show-overflow-tooltip="true" align="center" prop="molSodh"/>
          <el-table-column label="销售物料代码" align="center" prop="somWldm" />
          <el-table-column label="销售物料品名规格" align="center" prop="somItmPmgg" />
          <el-table-column label="工单数量" :show-overflow-tooltip="true" align="center" prop="molMzDdsl"/>
          <el-table-column label="制造物料代码" align="center" prop="molWldm" />
          <el-table-column label="制造物料品名规格" align="center" prop="itmPmgg" />
          <el-table-column label="订单数量" :show-overflow-tooltip="true" align="center" prop="molSomDdsl"/>
          <el-table-column label="制造单号" :show-overflow-tooltip="true" align="center" prop="molZzdh"/>
          <el-table-column label="标准工时" :show-overflow-tooltip="true" align="center" prop="molCxsj"/>
          <el-table-column label="工单耗时(H)" :show-overflow-tooltip="true" align="center" prop="molSjCxsj"/>
          <el-table-column label="加工费" :show-overflow-tooltip="true" align="center" prop="molProcessingFees"/>
          <el-table-column label="工单盈亏" :show-overflow-tooltip="true" align="center" prop="molMzProcessingMoney"/>
        </el-table>
        <!-- 查询对话框   -->
        <el-dialog :title="title" v-model="openSearch" :close-on-click-modal="false" draggable width="780px"
                   append-to-body>
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="98px">
            <el-col :span="24">
              <el-form-item label="排程日期" prop="dateRange">
                <el-date-picker
                  clearable
                  size="small"
                  v-model="dateRange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营销单号" prop="moeSodh">
                <el-input v-model="queryParams.moeSodh" placeholder="请输入营销单号" clearable size="small"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="父项品名规格" prop="somPmgg">
                <el-input v-model="queryParams.somPmgg" placeholder="请输入父项品名规格" clearable size="small"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="制造单号" prop="moeZzdh">
                <el-input v-model="queryParams.moeZzdh" placeholder="请输入制造单号" clearable size="small"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子项品名规格" prop="itmPmgg">
                <el-input v-model="queryParams.itmPmgg" placeholder="请输入子项品名规格" clearable size="small"/>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="机台编号" prop="moeJtbh">-->
<!--                <el-input v-model="queryParams.moeJtbh" placeholder="机台编号" clearable size="small"-->
<!--                          @keyup.enter.native="handleQuery"/>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="模具编号" prop="moeMjbh">-->
<!--                <el-input v-model="queryParams.moeMjbh" placeholder="请输入模具编号" clearable size="small"-->
<!--                          @keyup.enter.native="handleQuery"/>-->
<!--              </el-form-item>-->
<!--            </el-col>-->

            <el-col :span="24">
              <el-form-item style="margin-top: 25px; display: flex; justify-content: flex-end">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleQuery">确认</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {exportMoeDet, listMoeDetJt, listMoeProcess, moeProcessProfitExport} from '@/api/produce/moeDet'

export default {
  name: 'JtPlanMaintain',
  props: {
    query: null,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 总条数
      total: 0,
      //请求状态
      moeZtbzOptions: [
        {
          dictLabel: '进行中',
          dictValue: '1',
        },
        {
          dictLabel: '暂停',
          dictValue: '3',
        },
        {
          dictLabel: '等待',
          dictValue: '2',
        },
        {
          dictLabel: '完成',
          dictValue: '4',
        },
        {
          dictLabel: '全部',

          dictValue: '',
        },
      ],
      // 工单表格数据
      moeDetList: [],
      tableH: document.body.clientHeight - 230,
      // 日期范围
      dateRange: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 60), new Date(new Date().getTime() + 3600 * 1000 * 24 * 3650)],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        moeZzdh: null,
        moeSodh: null,
        moeJtbh: null,
        moeMjbh: null,
        itmPmgg: null,
        somPmgg: null,
        moeZtbz: '',
      },
      // 表单参数
      form: {},
      // 部门树选项
      deptOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    query(newVal, oldVal) {
      this.getList()
    },
  },
  created() {
    this.getList()
    this.getTreeselect()
  },
  methods: {
    iCellStyle({row, column, rowIndex, columnIndex}) {
      //启动
      if (row.moeZtbz == '1') {
        return 'color:#09aa46'
      } else if (row.moeZtbz == '2') {
        return 'color:#bb0331'
      } else if (row.moeZtbz == '3') {
        return 'color:#4169E1'
      } else if (row.moeZtbz == '4 ') {
        return 'color:#FAFFF0'
      }
    },
    getTreeselect() {
      this.deptOptions = []
      listMoeDetJt(this.queryParams).then((response) => {
        this.deptOptions.push(response.data)
      })
    },
    rq() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    /** 查询工单列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (this.dateRange !== null) {
        this.queryParams.params['beginDate'] = this.moment(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.params['endDate'] = this.moment(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      this.queryParams.pageNum = 1
      if (this.query) this.queryParams = {...this.queryParams, ...this.query}
      listMoeProcess(this.queryParams).then((response) => {
        this.moeDetList = []
        this.moeDetList = this.moeDetList.concat(response.data.totalMoe.rows)
        this.total = response.data.totalMoe.total
        this.loading = false
      })
    },
    //load
    load() {
      if (this.queryParams.pageNum < Math.ceil(this.total / this.queryParams.pageSize)) {
        this.queryParams.pageNum++
        listMoeProcess(this.queryParams).then((response) => {
          this.moeDetList = this.moeDetList.concat(response.data.totalMoe.rows)
          this.total = response.data.totalMoe.total
          this.loading = false
        })
      }
      return 0
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openSearch = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.moeDetList = []
      this.getList()
      this.openSearch = false
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    },
    handleSearch() {
      this.title = '查询工单'
      this.openSearch = true
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有工单数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportLoading = true
          return moeProcessProfitExport(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
